<template>
  <div class="out-style">
    <el-form label-width="207px" :model="ruleForm" ref="ruleForm" :rules="rules">
      <h2>{{$t('message.ht-title')}}</h2>
      <h3 class="size">
        {{$t('message.cglx')}}
        <span>: {{contractName}}</span>
      </h3>

      <p class="divider"></p>
      <div class="mian-title">{{$t('message.qyf')}}</div>
      <div class="inner-style">
        <el-form-item :label="$t('message.jia-cg')+':'" class="search" prop="purchaser">
          <el-input
            :placeholder="$t('message.p-cgs')"
            @input="changeValue"
            @blur="onChange"
            v-model="ruleForm.purchaser"
          ></el-input>
          <hot-words :value="hotValue" width="80%" @hotClick="hotClick($event)" ref="hot1"></hot-words>
        </el-form-item>
        <el-form-item :label="$t('message.yi-gy')+':'" class="search" prop="supplier">
          <el-input
            :placeholder="$t('message.p-gys')"
            @input="changeValue2"
            @blur="onChange2"
            v-model="ruleForm.supplier"
          ></el-input>
          <hot-words :value="hotValue2" width="80%" @hotClick="hotClick2($event)" ref="hot2"></hot-words>
        </el-form-item>
        <add-select
          ref="select"
          v-for="(item,index) in partiesList"
          :itemData="item"
          :key="item.uid"
          @delParties="deletParties(index)"
        ></add-select>
        <el-button
          v-if="leg"
          style="margin-left: 220px;"
          type="primary"
          @click="addSelect"
        >{{$t('message.xzdf')}}</el-button>
      </div>
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.xymc')}}</div>
      <div class="inner-style">
        <el-form-item :label="$t('message.chinese')+':'" prop="contractTitleCn">
          <el-input :placeholder="$t('message.p-xymc')" v-model="ruleForm.contractTitleCn"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowEnglish" :label="$t('message.english')+':'" prop="contractTitleEn">
          <el-input :placeholder="$t('message.p-en')" v-model="ruleForm.contractTitleEn"></el-input>
        </el-form-item>
      </div>
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.xyjbqk')}}</div>
      <div class="inner-style">
        <el-form-item :label="$t('message.xyh')+':'" prop="contractId">
          <el-input :placeholder="$t('message.p-xyh2')" v-model="ruleForm.contractId"></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.xynr')+':'" prop="content">
          <el-input
            type="textarea"
            :rows="6"
            style="width: 80%;"
            :maxlength="512"
            show-word-limit
            resize="none"
            :placeholder="$t('message.p-xybr2')"
            v-model="ruleForm.content"
          ></el-input>
        </el-form-item>
        <!-- 上传文件 -->
        <el-form-item :label="$t('message.scfj')+':'">
          <upload-file ref="file" :pfileList="cfileList"></upload-file>
        </el-form-item>
        <el-form-item :label="$t('message.htqx')+':'" prop="executionDate">
          <el-date-picker
            v-model="ruleForm.executionDate"
            type="daterange"
            value-format="timestamp"
            :clearable="false"
            :range-separator="$t('message.to')"
            @change="changeTime"
            :start-placeholder="$t('message.p-starM')"
            :end-placeholder="$t('message.p-endM')"
          ></el-date-picker>
        </el-form-item>
      </div>
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.xyje')}}</div>
      <div class="inner-style">
        <el-form-item
          :label="$t('message.bz')+':'"
          prop="currency"
          style="display: inline-block;"
        >
          <el-select
            v-model="ruleForm.currency"
            @change="chooseCurrency"
            filterable
            :placeholder="$t('message.p-qxz')"
          >
            <el-option
              v-for="item in exchangeRateList"
              :key="item.id"
              :label="item.currency"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.je')+':'" prop="amount">
          <el-input
			type="number"
			@mousewheel.native.prevent
            :placeholder="$t('message.p-je')"
            :disabled="disabled"
            onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')"
            v-model="ruleForm.amount"
            @input="changeUsd"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.zscmy')+':'" prop="usd">
          <el-input v-model="ruleForm.usd" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.ynncjdndje')+':'" prop="amountPerYear">
          <el-input
            v-model="ruleForm.amountPerYear"
            style="position: relative;top: 24px;"
            readonly="readonly"
          ></el-input>
        </el-form-item>
      </div>
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.fwcklb')}}</div>
      <div class="inner-style">
        <el-form-item :label="$t('message.htzl')+':'" prop="border">
          <el-select
            v-model="ruleForm.border"
            style="display: inline-block;"
            @change="chooseBorder"
            class="select"
            :placeholder="$t('message.p-qxz')"
          >
            <el-option :label="$t('message.jn')" value="within"></el-option>
            <el-option :label="$t('message.jw')" value="overseas"></el-option>
          </el-select>
          <el-form-item
            label
            v-if="ruleForm.border == 'overseas'"
            prop="impExpType"
            style="display: inline-block;"
          >
            <el-select
              v-model="ruleForm.impExpType"
              class="select"
              style="margin-left: 12px;"
              :placeholder="$t('message.p-qxz')"
            >
              <el-option :label="$t('message.jk')" value="import"></el-option>
              <el-option :label="$t('message.ck')" value="export"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.gndq')+':'"
            label-width="160px"
            prop="province"
            v-if="ruleForm.border == 'within'"
            style="display: inline-block;"
          >
            <el-select
              v-model="ruleForm.province"
              class="select"
              :placeholder="$t('message.p-qxz')"
              @change="chooseProvince"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.code"
                :label="item.province"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label
            v-if="ruleForm.border == 'within'&&cityList.length!==0"
            prop="cityCode"
            style="display: inline-block;margin-left: 12px;"
          >
            <el-select
              v-model="ruleForm.cityCode"
              class="select"
              :placeholder="$t('message.p-qxz')"
            >
              <el-option
                v-for="item in cityList"
                :key="item.code"
                :label="item.province"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.gbdq')"
            label-width="120px"
            prop="regionCode"
            v-if="ruleForm.border == 'overseas'"
            style="display: inline-block;"
          >
            <el-select
              v-model="ruleForm.regionCode"
              style="width: 130px;"
              filterable
              :placeholder="$t('message.p-qxz')"
            >
              <el-option
                v-for="item in regionList"
                :key="item.value"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          
        </el-form-item>
		<el-form-item
		  :label="$t('message.zfqysd')+':'"
		  prop="attributionProvince"
		  v-if="ruleForm.border == 'overseas'"
		  style="display: inline-block;"
		>
		  <el-select
		    v-model="ruleForm.attributionProvince"
		    class="select"
		    filterable
		    :placeholder="$t('message.p-qxz')"
		    @change="chooseAttributionProvince"
		  >
		    <el-option
		      v-for="item in provinceList"
		      :key="item.code"
		      :label="item.province"
		      :value="item.code"
		    ></el-option>
		  </el-select>
		  <el-form-item
		    label
		    v-if="ruleForm.border == 'overseas'&&cityList2.length!==0"
		    prop="attributionCityCode"
		    style="display: inline-block;"
		  >
		  <el-select
		    v-model="ruleForm.attributionCityCode"
		    class="select"
		    filterable
		    style="margin-left:15px"
		    :placeholder="$t('message.p-qxz')"
		  >
		    <el-option
		      v-for="item in cityList2"
		      :key="item.code"
		      :label="item.province"
		      :value="item.code"
		    ></el-option>
		  </el-select>
		  </el-form-item>
		</el-form-item>
		
		
      </div>
      <!--  -->
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.hyly')}}</div>
      <div class="inner-style">
        <el-form-item
          :label="$t('message.hyly')+':'"
          style="display: inline-block;"
          prop="serviceType1"
        >
          <el-select
            v-model="ruleForm.serviceType1"
            @change="changeOne($event)"
            class="select"
            :placeholder="$t('message.p-qxz')"
          >
            <el-option
              v-for="item in serviceList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="secondList.length!==0"
          class="jks"
          prop="serviceType2"
          style="display:inline-block"
        >
          <el-select
            v-model="ruleForm.serviceType2"
            @change="changeTwo($event)"
            class="select1"
            :placeholder="$t('message.p-qxz')"
          >
            <el-option
              v-for="item in secondList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="thirdList.length!==0"
          class="jkz"
          prop="serviceType3"
          style="display:inline-block"
        >
          <el-select
            v-model="ruleForm.serviceType3"
            class="select2"
            :placeholder="$t('message.p-qxz')"
          >
            <el-option
              v-for="item in thirdList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="otherShow" :label="$t('message.qtsm')+':'" prop="otherService">
          <el-input :placeholder="$t('message.p-qtfw2')" v-model="ruleForm.otherService"></el-input>
        </el-form-item>
      </div>
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.txrxx')}}</div>
      <div class="inner-style">
        <!-- <el-form-item label="合同类别" prop="contractType">
                    <el-select style="width: 80%;" v-model="ruleForm.contractType" @chang="industryChoose" placeholder="请选择">
                        <el-option v-for="item in contractTypeList" :key="item.dictName" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
        </el-form-item>-->
        <el-form-item :label="$t('message.tbr')+':'" prop="filledBy">
          <el-input :placeholder="$t('message.p-tbr')" v-model="ruleForm.filledBy"></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.lxdh')+':'" prop="phone">
          <el-input :placeholder="$t('message.p-phone2')" maxlength="20" onkeyup="this.value=this.value.replace(/[^\d^\+]/,'')" v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.zjhm')+':'" prop="landlineNumber">
          <el-input :placeholder="$t('message.p-tell2')" v-model="ruleForm.landlineNumber"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div class="bnt">
      <el-button
        class="save"
        :disabled="isFlag"
        :loading="isFlag"
        @click="pushSave('ruleForm')"
      >{{$t('message.zc')}}</el-button>
      <el-button
        type="button"
        :disabled="isFlag2"
        :loading="isFlag2"
        @click="submit('ruleForm')"
        class="submit"
      >{{$t('message.tjsh')}}</el-button>
    </div>
  </div>
</template>

<script>
import {
  validNumber,
  checkPhone,
  checkData,
  checkSupplier,
  checkTitle,
  checkLandlinee,
  checkContractId,
  checkContract,
  filledName,
  otherService
} from "@assets/js/validator.js";
import addSelect from "@components/select.vue";
import hotWords from "@components/hotWords.vue";
import uploadFile from "@components/uploadFile/uploadFile.vue";
import buried from "@/utils/buried";
let nub = 0;
export default {
  data() {
    return {
      ruleForm: {
        attributionProvince: "",
        attributionCityCode: "",
        purchaser: "",
        supplier: "",
        contractTitleCn: "",
        contractTitleEn: "",
        content: "",
        contractId: "",
        executionStartDate: "",
        executionEndDate: "",
        executionDate: [],
        amount: "",
        currency: "",
        usd: "",
        filledBy: "",
        phone: "",
        border: "",
        impExpType: "",
        regionCode: "",
        province: "",
        cityCode: "",
        otherComment: "",
        otherService: "",
        serviceType1: "",
        serviceType2: "",
        serviceType3: "",
        client: "",
        landlineNumber: "",
        amountPerYear: "",
        ossUrlList: [],
        contractType: "",
        releaseCode: ""
      },
      proList: [],
      rules2: {},
      leg: true,
      loading: false,
      rules: {
        purchaser: [
          {
            required: true,
            validator: checkSupplier,
            trigger: "blur"
          }
        ],
        supplier: [
          {
            required: true,
            validator: checkSupplier,
            trigger: "blur"
          }
        ],
        attributionProvince: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
          {
            trigger: "change"  
          }
        ],
        attributionCityCode: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
          {
            trigger: "change"  
          }
        ],
        contractTitleCn: [
          {
            required: true,
            validator: checkTitle,
            trigger: "blur"
          }
        ],
        contractTitleEn: [
          {
            required: false,
            validator: checkData,
            trigger: "blur"
          }
        ],
        content: [
          {
            required: true,
            validator: checkContract,
            trigger: "blur"
          }
        ],
        executionDate: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          }
        ],
        industryType: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          }
        ],
        currency: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          }
        ],
        province: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
		  {
		  	trigger: "change"   
		  }
        ],
        cityCode: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
		  {
		  	trigger: "change"   
		  }
        ],
        serviceType1: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          }
        ],
        serviceType2: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          }
        ],
        serviceType3: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          }
        ],
        border: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
		  {
			trigger: "change"   
		  }
        ],
        impExpType: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
		  {
		  	trigger: "change"   
		  }
        ],
        otherService: [
          {
            required: true,
            validator: otherService,
            trigger: "blur"
          }
        ],
        contractId: [
          {
            required: true,
            validator: checkContractId,
            trigger: "blur"
          }
        ],
        filledBy: [
          {
            required: true,
            validator: filledName,
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            validator: checkPhone,
            trigger: "blur"
          }
        ],
        amount: [
          {
            required: true,
            validator: validNumber,
            trigger: "blur"
          }
        ],
        regionCode: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
          {
            trigger: "change"  
          }
        ],
        otherComment: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          }
        ],
        landlineNumber: [
          {
            validator: checkLandlinee,
            trigger: "blur"
          }
        ]
      },
      partiesList: [],
      exchangeRateList: [], //汇率币种
      regionList: [], // 国家列表
      provinceList: [], // 省自治区列表
      cityList: [],
      cityList2: [],
      addTypeList: [],
      serviceList: [], // 服务类型 - 全部
      rate: "",
      disabled: true,
      secondList: [],
      thirdList: [],
      industryTypeList: [],
      contractTypeList: [], //合同类别
      cfileList: [],
      secondStr: "", //存二级选中数据,
      thirdStr: "",
      cityStr: "",
      state: "",
      hotValue: "",
      hotValue2: "",
      contractName: "",
      isFlag: false,
      isFlag2: false,
	  isShowEnglish:true
    };
  },
  components: {
    addSelect,
    hotWords,
    uploadFile
  },
  mounted() {
	let langs = this.getCookie('site_lang') 
	if (langs == 'en-US') {
		this.isShowEnglish = false
	} 
    let type = this.$route.query.type;
    buried("result_add_new", "add_new_contract_fill", { type });
    this.exchangeRateList = this.$store.state.exchangeRateList;
    this.provinceList = this.$store.state.provinceAllList;
    this.regionList = this.$store.state.regionList;
    this.serviceList = this.$store.state.serviceList;

    // this.industryTypeList = this.$store.state.industryList
    this.addTypeList = this.$store.state.addTypeList;
    this.contractTypeList = this.$store.state.contractTypeList;
    
    if (this.$route.query.type) {
      let type = this.$route.query.type;
      this.ruleForm.contractType = type;
      this.addTypeList.forEach(item => {
        if (item.value == type) {
          this.contractName = item.label;
        }
      });
    }
    this.state = this.$route.query.state;
    if (this.state == "edit") {
      //编辑暂存回显
      this.updateContract();
    }
     
  },
  watch: {
    releaseArea2: function(val) {
      this.serviceList = val;
    },
    exchangeRateList2: function(val) {
      this.exchangeRateList = val;
    },
    provinceList2: function(val) {
      this.provinceList = val;
    },
    regionList2: function(val) {
      this.regionList = val;
    }
  },
  methods: {
	getCookie (cookieName) {
		var strCookie = document.cookie;
		var arrCookie = strCookie.split("; ");
		for (var i = 0; i < arrCookie.length; i++) {
			var arr = arrCookie[i].split("=");
			if (cookieName == arr[0]) {
			  return arr[1];
			}
		}
		return "";
	},
    updateContract() {
      //编辑暂存回显
      this.$axios
        .get("/api/contract/getContract", {
          params: {
            id: this.$route.query.id
          }
        })
        .then(res => {
          if (res.code == 200) {
			  console.log(res.data)
            this.ruleForm = res.data;
            if (this.ruleForm.currency !== ""&&this.ruleForm.currency !== null) {
              this.disabled = false;
              this.exchangeRateList.forEach(item => {
                //获取汇率回显
                if (this.ruleForm.currency == item.code) {
                  this.rate = item.rate;
                }
              });
            }
            this.ruleForm.client = JSON.parse(this.ruleForm.client);
            this.ruleForm.purchaser = this.ruleForm.client[0].value;
            this.ruleForm.supplier = this.ruleForm.client[1].value;
            if (this.ruleForm.client.length !== 0) {
              //新增多方回显
              this.ruleForm.client.shift();
              this.ruleForm.client.shift();
            }
            this.partiesList = this.ruleForm.client;
            if (this.partiesList.length >= 5) {
              this.leg = false;
            }
            this.secondStr = this.ruleForm.serviceType2;
            this.thirdStr = this.ruleForm.serviceType3;
            // 合同类型回显
            this.addTypeList.forEach(item => {
              if (item.value == this.ruleForm.contractType) {
                this.contractName = item.label;
              }
            });
            // 发布领域回显
            if (this.secondStr !== ""&&this.secondStr !== null) {
              this.changeOne(this.ruleForm.serviceType1);
              this.ruleForm.serviceType2 = this.secondStr;
            }
            if (this.thirdStr !== ""&&this.thirdStr!== null) {
              this.changeTwo(this.ruleForm.serviceType2);
              this.ruleForm.serviceType3 = this.thirdStr;
            }

            // 境外省市回显
            let attributionCityCode = res.data.attributionCityCode;
            if (res.data.attributionCityCode !== ""&&res.data.attributionCityCode !==null) {
              this.chooseAttributionProvince(this.ruleForm.attributionProvince);
              this.ruleForm.attributionCityCode = attributionCityCode;
            }

            //选择城市回显
            if (this.ruleForm.cityCode !== ""&&this.ruleForm.cityCode !==null) {
              // this.ruleForm.cityCode = this.ruleForm.cityCode
              this.cityStr = this.ruleForm.cityCode;
              this.chooseProvince(this.ruleForm.province);
              this.ruleForm.cityCode = this.cityStr;
            }

            // 时间回显
            if (
              this.ruleForm.executionStartDate == null ||
              this.ruleForm.executionStartDate == 0
            ) {
              this.$set(this.ruleForm, "executionDate", []);
              this.disabled = true;
            } else {
              this.$set(this.ruleForm, "executionDate", [
                this.ruleForm.executionStartDate,
                this.ruleForm.executionEndDate
              ]);
            }
            //附件回显
            this.cfileList = this.ruleForm.ossUrlList;
            this.ruleForm.ossUrlList.forEach(item => {
              this.$refs.file.fileLists.push(item);
            });
          } else {
            this.$message.error(res.message);
          }
        });
    },
    chooseBorder(value) {
      if (value == "within") {
        this.ruleForm.impExpType = "";
        this.ruleForm.regionCode = "";
        this.ruleForm.attributionCityCode = "";
        this.ruleForm.attributionProvince = "";
      } else if (value == "overseas") {
        this.ruleForm.province = "";
        this.ruleForm.cityCode = "";
      }
    },
    deletParties(index) {
      this.partiesList.splice(index, 1);
      if (this.partiesList.length < 5) {
        this.leg = true;
      }
    },
    addSelect() {
      this.partiesList.push({
        value: "",
        type: "",
        uid: nub++
      });
      if (this.partiesList.length >= 5) {
        this.leg = false;
      }
    },
    onChange() {
      setTimeout(() => {
        this.$refs.hot1.isShow = false;
      }, 300);
    },
    onChange2() {
      setTimeout(() => {
        this.$refs.hot2.isShow = false;
      }, 300);
    },
    changeValue(value) {
      this.hotValue = value;
    },
    changeValue2(value) {
      this.hotValue2 = value;
    },
    chooseCurrency(value) {
      this.exchangeRateList.forEach(item => {
        if (item.code == value) {
          this.rate = item.rate;
          if (this.ruleForm.executionDate != "") {
            this.disabled = false;
          }
        }
      });
      this.ruleForm.amount = "";
      this.ruleForm.usd = "";
      this.ruleForm.amountPerYear = "";
    },
    changeTime(value) {
      this.ruleForm.amount = "";
      this.ruleForm.usd = "";
      this.ruleForm.amountPerYear = "";
      if (this.value !== "" && this.rate != "") {
        this.disabled = false;
      }
    },
    changeUsd(value) {
		if(value==''){
			this.ruleForm.usd = "";
			this.ruleForm.amountPerYear = "";  
	  }
      if (
        this.rate !== "" &&
        this.ruleForm.executionDate != "" &&
        value !== "" &&
        !isNaN(value)
      ) {
        let m = this.monDiff(
          this.ruleForm.executionDate[0],
          this.ruleForm.executionDate[1]
        );
        this.ruleForm.usd = ((value * this.rate) / 10000).toFixed(2) * 1;
        if (this.ruleForm.executionDate != "") {
          if (m > 12) {
            this.ruleForm.amountPerYear =
              ((this.ruleForm.usd / m) * 12).toFixed(2) * 1;
          } else {
            this.ruleForm.amountPerYear = this.ruleForm.usd;
          }
        }
      }
    },
    monDiff(startTime, endTime) {
      let s = endTime - startTime;
      return parseInt(s / 2592000 / 1000);
    },
    chooseAttributionProvince(value) {
      let indexTab;
      this.cityList2 = [];
      this.ruleForm.attributionCityCode = "";
      this.provinceList.forEach((item, index) => {
        if (item.code == value) {
          indexTab = index;
        }
      });
      if (this.provinceList[indexTab].subordinateProvinceList.length !== 0) {
        this.provinceList[indexTab].subordinateProvinceList.forEach(item => {
          this.cityList2.push(item);
        });
      }
    },
    chooseProvince(value) {
      let indexTab;
      this.cityList = [];
      this.ruleForm.cityCode = "";
      this.provinceList.forEach((item, index) => {
        if (item.code == value) {
          indexTab = index;
        }
      });
      if (this.provinceList[indexTab].subordinateProvinceList.length !== 0) {
        this.provinceList[indexTab].subordinateProvinceList.forEach(item => {
          this.cityList.push(item);
        });
      }
    },
    hotClick(value) {
      this.ruleForm.purchaser = value;
    },
    hotClick2(value) {
      this.ruleForm.supplier = value;
    },
    changeOne(value) {
      let indexTab;
      this.clear1();
      this.serviceList.forEach((item, index) => {
        if (item.dictCode == value) {
          indexTab = index;
        }
      });
      if (value !== "") {
        if (indexTab!==''&&this.serviceList[indexTab].serviceList&&this.serviceList[indexTab].serviceList.length !== 0) {
          this.serviceList[indexTab].serviceList.forEach(item => {
            this.secondList.push(item);
          });
        }
      }
    },
    changeTwo(value) {
      let indexTab;
      this.clear2();
      this.secondList.forEach((item, index) => {
        if (item.dictCode == value) {
          indexTab = index;
        }
      });
      if (this.secondList.length !== 0) {
        if (this.secondList[indexTab].serviceList.length !== 0) {
          this.secondList[indexTab].serviceList.forEach(item => {
            this.thirdList.push(item);
          });
        }
      }
    },
    clear1() {
      this.secondList = [];
      this.thirdList = [];
      this.ruleForm.serviceType2 = "";
      this.ruleForm.serviceType3 = "";
    },
    clear2() {
      this.thirdList = [];
      this.ruleForm.serviceType3 = "";
    },
    pushSave() {
      // this.beforSubmit()
      this.isFlag = true;
      const params = this.beforSubmit();
      params.id = this.$route.query.id || this.id || "";
      this.state = this.$route.query.state;
      if (this.state == "edit") {
        //编辑状态下的暂存
        if (this.ruleForm.approvalTime) {
          delete this.ruleForm.approvalTime;
        }
        this.$axios
          .post("/api/contract/updateContract", params)
          .then(res => {
            this.isFlag = false;
            if (res.code == 200) {
              this.$message.success(this.$t("message.zccg"));
              this.$router.push({
                path: "/contractstatistics",
                query: {
                  state: "edit",
                  id: this.$route.query.id
                }
              });
            }
          })
          .catch(err => {
            this.$message.error(res.message);
          });
      } else {
        //新建状态下的暂存
        this.$axios
          .post("/api/contract/contractDraft", params)
          .then(res => {
            this.isFlag = false;
            if (res.code == 200) {
              this.$message.success(this.$t("message.zccg"));
              this.$router.push({
                path: "/contractstatistics",
                query: {
                  state: "edit",
                  id: res.data
                }
              });
              this.id = res.data;
            }
          })
          .catch(err => {
            this.$message.error(res.message);
          });
      }
    },
    submit(formName) {
      //提交
      const that = this;
      that.$refs[formName].validate(valid => {
        let isTrue = true;
        if (valid) {
          that.$refs.select &&
            that.$refs.select.forEach(item => {
              let flags = item.validateForm();
              if (!flags) isTrue = false;
            });
          if (isTrue) {
            const params = that.beforSubmit();
            params.id = that.$route.query.id || that.id || "";
            that.state = that.$route.query.state || that.state;
            // 校验重复
            let obj = {
              contractTitleCn: params.contractTitleCn,
              purchaser: params.purchaser,
              supplier: params.supplier
            };
            this.isFlag2 = false;
            if (that.state == "edit") {
              //编辑
              if (params.approvalTime) {
                delete params.approvalTime;
              }
              that.$axios
                .post("/api/contract/firstRejectSubmit", params)
                .then(res => {
                  if (res.code == 200) {
                    that.$message.success(this.$t("message.czcg"));
                    that.$router.push("/contract");
                  } else {
                    that.$message.error(this.$t("message.czsb"));
                  }
                })
                .catch(err => {
                  console.log(err);
                });
            } else {
              //提交
              that.$axios.post("/api/contract/listContracts", obj).then(res => {
                //查重复
                if (res.code == 200) {
                  // that.$message.success(res.message)
                  that.submitWay();
                } else {
                  that
                    .$confirm(res.message, this.$t("message.ts"), {
                      confirmButtonText: this.$t("message.ture"),
                      cancelButtonText: this.$t("message.false"),
                      type: "warning"
                    })
                    .then(() => {
                      that.submitWay();
                    });
                }
              });
            }
          }
        } else {
          that.$message.error(this.$t("message.m14"));
          return false;
        }
      });
    },
    beforSubmit() {
      const rst = {
        ...this.ruleForm,
        amount: Number(this.ruleForm.amount),
		usd: Number(this.ruleForm.usd),
		amountPerYear: Number(this.ruleForm.amountPerYear),
        currency: this.ruleForm.currency!==null?String(this.ruleForm.currency):this.ruleForm.currency,
        contractType: this.$route.query.type,
        cityCode: this.ruleForm.cityCode!==null?String(this.ruleForm.cityCode):this.ruleForm.cityCode,
        province: this.ruleForm.cityCode!==null?String(this.ruleForm.province):this.ruleForm.province
      };

      delete rst.createTime;
      delete rst.modifiedTime;
      delete rst.submitTime;
      delete rst.approvalTime;
      delete rst.approvalStatus;

      //处理供应商采购商数组
      this.proList = [];
      let str1 = "";
      let str2 = "";
      if (this.$refs.select) {
        this.$refs.select.forEach(item => {
          this.proList.push(item.obj);
          if (item.obj.type == "1") {
            str1 += item.obj.value;
          } else if (item.obj.type == "2") {
            str2 += item.obj.value;
          }
        });
      }
      this.proList.unshift({
        type: "2",
        value: this.ruleForm.supplier
      });
      this.proList.unshift({
        type: "1",
        value: this.ruleForm.purchaser
      });
      rst.client = JSON.stringify(this.proList);
      rst.purchaser = this.ruleForm.purchaser + str1;
      rst.supplier = this.ruleForm.supplier + str2;
      // 处理合同期限
	  console.log(this.ruleForm.executionDate)
      if (this.ruleForm.executionDate !== ""&&this.ruleForm.executionDate !== undefined) {
        rst.executionStartDate = this.ruleForm.executionDate[0];
        rst.executionEndDate = this.ruleForm.executionDate[1];
      }
      // 附件处理
      rst.ossUrlList = this.$refs.file.fileLists;
      return rst;
    },
    submitWay() {
      const params = this.beforSubmit();
      params.id = this.$route.query.id || this.id || "";

      this.$axios
        .post("/api/contract/insertContract", params)
        .then(res => {
          this.isFlag2 = false;
          if (res.code == 200) {
            this.$message.success(this.$t("message.czcg"));
            this.$router.push("/contract");
          } else {
            this.$message.error(this.$t("message.czsb"));
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  computed: {
    releaseArea2() {
      return this.$store.state.serviceList;
    },
    exchangeRateList2() {
      return this.$store.state.exchangeRateList;
    },
    provinceList2() {
      return this.$store.state.provinceAllList;
    },
    regionList2() {
      return this.$store.state.regionList;
    },
    otherShow() {
      let isTrue = false;
      if (this.ruleForm.serviceType2 !== ""&&this.ruleForm.serviceType2 !== null) {
        if (this.ruleForm.serviceType2.indexOf("qt") !== -1) {
          isTrue = true;
        }
      }
      if (this.ruleForm.serviceType3 !== ""&&this.ruleForm.serviceType3 !== null) {
        if (this.ruleForm.serviceType3.indexOf("qt") !== -1) {
          isTrue = true;
        }
      }
      return isTrue;
    }
  }
};
</script>

<style lang="scss" scoped>
.jks {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}
.jkz {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}
.out-style {
  width: 100%;
  background: #fff;
  padding: 60px 120px;
}
.inner-style {
  width: 100%;
  margin: 0 auto;
}
.out-style {
  ::v-deep .el-form-item__label {
    width: 220px;
  }
}
h2 {
  margin: 0 0 30px;
  font-size: 18px;
  text-align: center;
}

.el-input {
  width: 80%;
}

.add-parties {
  margin-left: 12px;
}

.divider {
  width: 100%;
  border-top: 1px dashed #d9e1e9;
  margin-top: 12px;
}

.mian-title {
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 16px;
  font-size: 16px;
  border-left: 4px solid #fe8c01;
  padding-left: 10px;
  margin: 12px 0 24px 0;
}

.select {
  width: 130px;
}

.select1 {
  width: 130px;
  margin-left: 15px;
}

.select2 {
  width: 130px;
  margin-left: 15px;
}

.bnt {
  text-align: center;
  margin: 40px 0 50px 0;
}
.submit {
  width: 171px;
  height: 40px;
  margin-left: 46px;
  color: rgba(255, 255, 255, 1);
  border: none;
  background: linear-gradient(
    90deg,
    rgba(255, 192, 2, 1) 0%,
    rgba(254, 140, 1, 1) 100%
  );
}

.save {
  width: 171px;
  height: 40px;
  border: 1px solid rgba(151, 151, 151, 1);
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  background-color: #ffffff;
}
.size {
  font-size: 16px;
}

// .newstyle{
// 	::v-deep .el-form-item__label{
// 		width: 110px !important;
// 	}
// 	::v-deep .el-form-item__content{
// 		margin-left: 100px !important;
// 	}
// }
.search {
  position: relative;
}
</style>
